import React, { useState, useImperativeHandle } from 'react';
import { Modal } from 'antd';
import { ModalProps } from 'antd/lib/modal/Modal.d';

interface ZxModal extends ModalProps {
  onClose?: () => void;
  onSubmit?: () => void;
}

const CreateForm = React.forwardRef((props: ZxModal, ref) => {
  const { visible, onClose, onSubmit } = props;
  const [loading, setLoading] = useState(false);

  function done(loading: boolean) {
    if (!loading) {
      setTimeout(() => {
        setLoading(loading);
      }, 300);
    } else {
      setLoading(loading);
    }
  }

  useImperativeHandle(ref, () => ({
    done,
  }));

  return (
    <Modal
      maskClosable={false}
      destroyOnClose
      visible={visible}
      onCancel={() => {
        onClose && onClose();
      }}
      onOk={() => {
        setLoading(true);
        onSubmit && onSubmit();
      }}
      confirmLoading={loading}
      afterClose={() => {
        setLoading(false);
      }}
      {...props}
    >
      {props.children}
    </Modal>
  );
});

export default CreateForm;
